<template>
	<view class="task-top">
		<view class="avatar">
			<image class="avatar-image" :src="avatarImage"></image>
		</view>

		<view class="Basic-information">
			<view class="nickName">{{nickName}}</view>
			<view class="state">{{state}}</view>
		</view>
	</view>
</template>

<script>
	import config from "@/config"; // 导入配置文件

	export default {
		data() {
			return {};
		},
		props: {
			avatar: {
				type: String,
				default: "https://img2.woyaogexing.com/2023/09/21/f07e27537e9f009d46e61b4b98c803f5.jpg",
			},
			nickName: {
				type: String,
				default: "HMMS",
			},
			state: {
				type: String,
				default: "FREE",
			},
		},
		computed: {
			avatarImage() {
				// 使用计算属性拼接图片路径
				return `${config.baseURL}/img/${this.avatar}`;
			},
		},
	};
</script>


<style lang="scss">
	.task-top {
		height: 150rpx;
		width: 100vw;
		background-color: #4f4f4f;
		display: flex;
		align-items: center;

		.avatar {
			margin-left: 20rpx;
			width: 100rpx;
			height: 100rpx;

			.avatar-image {
				border-radius: 50%;
				height: 100%;
				width: 100%;
			}
		}

		.Basic-information {
			color: white;
			margin-left: 20rpx;

			.nickName {
				margin-bottom: 5rpx;
				font-weight: 600;
				font-size: 35rpx;
			}
		}


	}
</style>
